<template>
  <div class="add-project">
    <el-button class="project" type="primary" size="small" icon="el-icon-plus" @click="dialogVisible = true">添加项目</el-button>

    <el-dialog title="新建项目" :visible.sync="dialogVisible" width="40%" :open="openDialog()">

      <el-form ref="projectForm" :model="projectForm" label-width="80px">
        <el-form-item label="项目名称" required>
          <el-input v-model="projectForm.name" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="版本号" required>
          <el-input v-model="projectForm.version" placeholder="请输入版本号"></el-input>
        </el-form-item>
        <el-form-item label="项目类型" required>
          <el-select v-model="projectForm.type" placeholder="请选择项目类型">
            <el-option label="Web" value="0"></el-option>
            <el-option label="App" value="1"></el-option>
            <el-option label="PC" value="2"></el-option>
            <el-option label="H5" value="3"></el-option>
            <el-option label="其他" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="项目描述" required>
          <!-- <el-input v-model="projectForm.remark" placeholder="请输入项目描述"></el-input> -->
          <el-input type="textarea" :rows="3" placeholder="请输入项目描述" v-model="projectForm.remark">
          </el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addProject(projectForm)">确 定</el-button>

      </span>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data () {
    return {
      dialogVisible: false,

      projectForm: {
        name: '',
        tyle: '',
        version: '',
        remark: '',
      }
    }
  },

  methods: {
    //添加项目
    addProject (form) {
      var self = this
      this.$http({
        url: this.$http.adornUrl('/aitesting/project/save'),
        method: 'post',
        data: form
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: data.msg,
            type: 'success'
          });
          this.$emit("getProject")
          this.dialogVisible = false
        } else {
          this.$message({
            message: data.msg,
            type: 'warning'
          });

        }
      })
    },


    openDialog () {


    }

  },



}
</script>

<style scoped>
.project {
  margin-top: 4px;
  float: right;
  margin-right: 4px;
}

.add-project >>> .el-select {
  display: contents;
}
</style>